<template>
  <div class="chart_wrap">
    <div class="form_wrap">
      <el-form>
        <el-form-item label="图表名称">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="图表基础配置">
          <el-select v-model="selCode">
            <el-option v-for="item in selData" :label="item.chartType" :value="item.code"></el-option>
         
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- 代码编辑器部分 -->
    <div > 
      <codeEditor :selCode="selCode"></codeEditor>
    </div>
    <!-- 图标部分 -->
    <div>
      <chartInfo :selCode="selCode"></chartInfo>
    </div>
  </div>
</template>
<script setup>
  import {ref} from 'vue'
  import codeEditor from './child/codeEditor.vue';
  import chartInfo from './child/chartInfo.vue'
  let selData=ref([{
    "chartType": "圆角空心饼图",
    "apiPath": "",
    "isLeader": false,
    "remark": "圆角空心饼图基础模版",
    "code": "{\"tooltip\":{\"trigger\":\"item\"},\"legend\":{\"top\":\"5%\",\"left\":\"center\"},\"series\":[{\"name\":\"Access From\",\"type\":\"pie\",\"radius\":[\"40%\",\"70%\"],\"avoidLabelOverlap\":false,\"itemStyle\":{\"borderRadius\":10,\"borderColor\":\"#fff\",\"borderWidth\":2},\"label\":{\"show\":false,\"position\":\"center\"},\"emphasis\":{\"label\":{\"show\":true,\"fontSize\":40,\"fontWeight\":\"bold\"}},\"labelLine\":{\"show\":false},\"data\":[{\"value\":1048,\"name\":\"Search Engine\"},{\"value\":735,\"name\":\"Direct\"},{\"value\":580,\"name\":\"Email\"},{\"value\":484,\"name\":\"Union Ads\"},{\"value\":300,\"name\":\"Video Ads\"}]}]}"
  },
  {
    "chartType": "玫瑰饼图",
    "apiPath": "",
    "isLeader": false,
    "remark": "玫瑰饼图基础模版",
    "code": "{\"legend\":{\"top\":\"bottom\"},\"toolbox\":{\"show\":true,\"feature\":{\"mark\":{\"show\":true},\"dataView\":{\"show\":true,\"readOnly\":false},\"restore\":{\"show\":true},\"saveAsImage\":{\"show\":true}}},\"series\":[{\"name\":\"Nightingale Chart\",\"type\":\"pie\",\"radius\":[50,250],\"center\":[\"50%\",\"50%\"],\"roseType\":\"area\",\"itemStyle\":{\"borderRadius\":8},\"data\":[{\"value\":40,\"name\":\"rose 1\"},{\"value\":38,\"name\":\"rose 2\"},{\"value\":32,\"name\":\"rose 3\"},{\"value\":30,\"name\":\"rose 4\"},{\"value\":28,\"name\":\"rose 5\"},{\"value\":26,\"name\":\"rose 6\"},{\"value\":22,\"name\":\"rose 7\"},{\"value\":18,\"name\":\"rose 8\"}]}]}"
  },
  {
    "chartType": "散点图",
    "apiPath": "",
    "isLeader": false,
    "remark": "散点图基础模版",
    "code": "{\"xAxis\":{},\"yAxis\":{},\"series\":[{\"symbolSize\":20,\"data\":[[10,8.04],[8.07,6.95],[13,7.58],[9.05,8.81],[11,8.33],[14,7.66],[13.4,6.81],[10,6.33],[14,8.96],[12.5,6.82]],\"type\":\"scatter\"}]}"
  }
])
// 下拉框v-model的数据 收集code
 let selCode=ref('')
</script>
<style lang="scss">
.chart_wrap{
  display: flex;
  >div{
    flex:1;
    margin: 10px;
  }
}
    .form_wrap{
     
      padding: 10px;
    
      box-sizing: border-box;
      border: 1px solid #ccc;
    }
</style>